<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Drag & Resize</title>
    <style>
    .wrap{
        height: 900px;
        width: 900px;
        background: #eee;
        position: relative;
        margin: 20px auto;
    }
    .item{
        height: 10%;
        width: 10%;
        background: #999;
        position: absolute;
        left: 0;
        top: 0;
    }
    </style>
    <style>
        [class*="widget_resize_"]{
            position:absolute;
        }
        .widget_resize_n{
            height: 4.9px;
            width: 100%;
            left: 0;
            top: -3.9px;
            cursor: n-resize;
        }
        .widget_resize_s{
            height: 4.9px;
            width: 100%;
            left: 0;
            bottom: -3.9px;;
            cursor: s-resize;
        }
        .widget_resize_w{
            height: 100%;
            width: 4.9px;
            left: -3.9px;;
            top: 0;
            cursor: w-resize;
        }
        .widget_resize_e{
            height: 100%;
            width: 4.9px;
            right: -3.9px;;
            top: 0;
            cursor: e-resize;
        }
        .widget_resize_ne{
            height: 4.9px;
            width: 4.9px;
            right: -3.9px;
            top: -3.9px;
            cursor: ne-resize;
        }
        .widget_resize_nw{
            height: 4.9px;
            width: 4.9px;
            left: -3.9px;
            top: -3.9px;
            cursor: nw-resize;
        }
        .widget_resize_se{
            height: 4.9px;
            width: 4.9px;
            right: -3.9px;
            bottom: -3.9px;
            cursor: se-resize;
        }
        .widget_resize_sw{
            height: 4.9px;
            width: 4.9px;
            left: -3.9px;
            bottom: -3.9px;
            cursor: sw-resize;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="item item1"></div>
        <div class="item item2" style="background: red;left: 50%;">第二个</div>
        <div class="item item3" style="background: yellow">第三个</div>
    </div>
</body>
<script src="../js/dragANDresize.js"></script>
<script>
    // var pointInfo = {}
    // function moveWithMouse(event){
    //     var dom = document.querySelector('.item');
    //     var curx = event.clientX;
    //     var cury = event.clientY;
    //     var movex = curx - pointInfo.x;
    //     var movey = cury - pointInfo.y;
    //     if(Math.abs(movex) > 10 || Math.abs(movey) > 10){
    //         dom.style.left = (movex + pointInfo.left) + 'px';
    //         dom.style.top = (movey + pointInfo.top) + 'px';
    //     }
    // }
    // function getDomPosition(dom, attr){
    //     if(attr){
    //         var res;
    //         switch(attr){
    //             case 'left':
    //                 res = Number(getComputedStyle(dom, false)['left'].replace('px',''))
    //                 break;
    //             case 'top':
    //                 res = Number(getComputedStyle(dom, false)['top'].replace('px',''))
    //                 break;
    //             case 'width':
    //                 res = dom.clientWidth;
    //                 break;
    //             case 'height':
    //                 res = dom.clientHeight;
    //                 break;
    //         }
    //         return res;
    //     }
    //     else{
    //         return {
    //             left: Number(getComputedStyle(dom, false)['left'].replace('px','')),
    //             top: Number(getComputedStyle(dom, false)['top'].replace('px','')),
    //             width: dom.clientWidth,
    //             height: dom.clientHeight
    //         }
    //     }
    // }
    // document.querySelector('.item').addEventListener('mousedown', function(event){
    //     pointInfo = getDomPosition(this)
    //     var ex = event.clientX;
    //     var ey = event.clientY;
    //     Object.assign(pointInfo, { x: ex, y: ey})
    //     // console.log(pointInfo)
    //     document.addEventListener('mousemove', moveWithMouse)
    // })
    // document.querySelector('.item').addEventListener('mouseup', function(event){
    //     var newpos = getDomPosition(this)
    //     Object.assign(pointInfo, newpos);
    //     document.removeEventListener('mousemove', moveWithMouse)
    // })

    // function initDrag(dom){
        
    // }
    document.querySelectorAll('.item').forEach(function(ele,ind){
        var tmp = new dragWidget({
            dom: ele,
            parentClassName: 'wrap',
            resizable: true,
            handlers: ['all']
        })
    })
</script>
</html>